
<template>
  <div id="app">
   
      <VueDragResize :preventActiveBehavior="true" :isActive="isActive" :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">
          <h3>Hello World!</h3>
          <p>{{ top }} х {{ left }} </p>
          <p>{{ width }} х {{ height }}</p>
          <el-button @click="openCanDrag">是否可以拖拽</el-button>
      </VueDragResize>
  </div>
</template>

<script>
  import VueDragResize from 'vue-drag-resize';

  export default {
      name: 'app',

      components: {
          VueDragResize
      },

      data() {
          return {
            isActive:false,
              width: 0,
              height: 0,
              top: 0,
              left: 0
          }
      },

      methods: {
        openCanDrag(){
          this.isActive = !this.isActive
        },
          resize(newRect) {
              this.width = newRect.width;
              this.height = newRect.height;
              this.top = newRect.top;
              this.left = newRect.left;
          }
      }
  }
</script>
<style lange="scss" scoped>
.all_data{
  margin-left: 200px;
}
</style>